<style lang="less" scoped>
	.movable {
		.movable {
			z-index: 999;
		}
	}
	.complaints {
		z-index: 999;
		width: 64px;
		height: 70px;
		background: rgba(0, 145, 253, 0.8);
		border-radius: 10rpx;
		padding-top: 5rpx;
		.hd {
			width: 36px;
			height: 30px;
			border-radius: 50% 50% 1% 50%;
			background: rgba(255, 255, 255, 0.9);
			padding: 10rpx;
		}
		.find {
			font-size: 24rpx;
			color: #ffffff;
			text-shadow: 0 0 2rpx #000;
			text-align: center;
			display: block;
			position: relative;
			top: -6rpx;
		}
		.group {
			.none {}
		}
	}
</style>
<template>
	<movable-area :style="{height:windowHeight+'px', width: windowWidth+'px'}" class="movable">
		<movable-view :x="x" :y="y" direction="all" :inertia="true" class="movable">
			<div class="complaints animated fadeInRight">
				<div class="group">
					<button class="none"
					        @tap="goKefu"
					        session-from="create"
					        open-type="contact">
						<img src="http://img.he29.com/api/png/110b3239226098866ea0b3081a919a43.png" class="hd">
					</button>
					<span class="find animated fadeIn" v-if="isShow">{{current}}</span>
				</div>
			</div>
		</movable-view>
		<slot />
	</movable-area>
</template>
<script type="text/javascript">
	/** 吐槽
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/4/3 0003
	 * Time: 上午 10:29
	 * Description:
	 */
	export default {
		name: 'complaints',
		props : {
			x:{
				type: Number,
				default: 10
			},
			y:{
				type: Number,
				default: 300
			}
		},
		data() {
			return {
				text: ['有问题','找客服'],
				current: ``,
				times: null,
				isShow: true,
				windowHeight: ``,
				windowWidth: ``
			}
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			goKefu(){},
			getCurr() {
				let allLength = this.text.length;
				this.times = setInterval(()=> {
					let number = this.$tools.numberByRange(0,100);
					this.current = this.text[number%2];
				}, 2000)
			},
			getInfo () {
				const info = this.$wxapi.sysInfo('');
				this.windowHeight = info.windowHeight;
				this.windowWidth = info.windowWidth;
			}
		},
		created () {
			this.current = this.text[0];
			this.getCurr();
			this.getInfo();
		},
		beforeDestroy (){
			clearInterval(this.times);
		}
	}
</script>
